<!-- 文章列表 -->
<template>

    <el-row class="sharelistBox">
      <div class="search-bar-container">
        <el-row class="sharelistBox">
          <el-autocomplete
            v-show="isSearchVisible"
            style="width: 240px; margin-right: 10px;"
            v-model="keyword"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
          ></el-autocomplete>
          <i class="el-icon-search" @click="toggleSearch" style="margin-top: 9px">搜索</i>
          <!-- el-row 中的其他内容 -->
          <!-- ... -->

        </el-row>
      </div>
      <el-col :span="24" class="s-item tcommonBox" v-for="(item,index) in articleList" :key="'article'+index">
            <span class="s-round-date">
                <span class="month" v-html="showInitDate(item.createTime,'month')+'月'"></span>
                <span class="day" v-html="showInitDate(item.createTime,'date')"></span>
            </span>
            <header>
                <h1>
                    <a :href="'#/DetailArticle?aid='+item.id" target="_blank">
                        {{item.title}}
                    </a>
                </h1>

                <h2>
                    <i class="fa fa-fw fa-user"></i>
                    发表人： <el-link type="primary" @click="showUserInfo(item.createBy)">
                  <el-tag type="success" @click="showUserInfo">

                  {{item.createName}}
                </el-tag></el-link>
                    <i class="fa fa-fw fa-clock-o"></i><span v-html="showInitDate(item.createTime,'all')">{{showInitDate(item.createTime,'all')}}</span> •
                    <i class="fa fa-fw fa-eye"></i>{{item.viewCount}} 次围观 •

                </h2>
                <div class="ui label">
                    <a :href="'#/Share?classId='+item.class_id">{{item.categoryName}}</a>
                </div>
            </header>
            <div class="article-content">
                <p style="text-indent:2em;">
                    {{item.summary}}
                </p>
                <p  style="max-height:300px;overflow:hidden;text-align:center;">
                    <img :src="item.thumbnail" alt="" class="maxW">
                </p>
            </div>
            <div class="viewdetail">
                <a class="tcolors-bg" :href="'#/DetailArticle?aid='+item.id" target="_blank">
                    阅读全文>>
                </a>
            </div>

        </el-col>
         <el-col class="viewmore">
            <a v-show="hasMore" class="tcolors-bg" href="javascript:void(0);" @click="addMoreFun">点击加载更多</a>
            <a v-show="!hasMore" class="tcolors-bg" href="javascript:void(0);">暂无更多数据</a>
        </el-col>

      <el-dialog
        title="用户主页"
        :visible.sync="dialogVisible"
        width="90%"
        :before-close="handleClose"
      >
        <div class="user-info">
          <div class="user-details">
            <div class="avatar-blog-image">
              <img :src="userInfo.avatar" alt="User Avatar" class="avatar-image">
            </div>
            <div class="user-info">
              <el-tooltip placement="top">
                <div slot="content">
                  你们有{{userInfo.followCommonsCount}}个共同关注
                  <br/>你们共同关注了 {{userInfo.followCommonsValue}}</div>

                  <h3>{{ userInfo.userName }}</h3>

              </el-tooltip>


              <div class="user-stats">
                <p class="blog-count">发布的博客: {{ userInfo.blogCount }}</p>
                <p class="follower-count">粉丝数量: {{ userInfo.followerCount }}</p>
                <div class="user-others">
                  <p class="user-email">邮箱: {{ userInfo.email }}</p>
                </div>
              </div>
            </div>
          </div>
          <button @click="toggleFollow" class="follow-button" :class="{ active: isFollowing }">
            <span v-if="userInfo.following">已关注</span>
            <span v-else>关注</span>
            <i class="icon-heart"></i>
          </button>
        </div>
        <div class="user-blog-content">
          <!-- Grid layout for user's blog content -->
          <div class="blog-grid">
            <!-- Loop through user blog data -->
            <div v-for="(blogItem, index) in userBlogs" :key="'blog-' + index" class="blog-item">
              <div class="blog-details">
                <!-- Link the blog title to the detail page -->
                <h3>
                  <a :href="'#/DetailArticle?aid=' + blogItem.id" target="_blank">
                    <div class="blog-thumbnail">
                      <img :src="blogItem.thumbnail" alt="Blog Image" class="blog-image">
                    </div>
                    {{ blogItem.title }}
                  </a>
                </h3>
                <p>{{ blogItem.summary }}</p>
                <!-- Add more details here as needed -->
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <h1>只显示最新五条哦！</h1>
    <el-button @click="dialogVisible = false">Close</el-button>
  </span>
      </el-dialog>

    </el-row>


</template>

<script>
import {initDate} from '../utils/server.js'
import {articleList, getArticleListByEs, getUserInfoArticleList} from '../api/article'
import {follow, getFollowArticleList, getUserBlogInfo} from "../api/follow";
    export default {
        name:'Share',
        data() { //选项 / 数据
            return {
                keyword:null,
                isSearchVisible :false,
                userInfo: {
                    followCommonsCount:5,
                    followCommonsValue:"若依,XX",
                    following:false,
                    userId:1,
                    gender:"男",
                    email:"1741672901@qq.com",
                    avatar : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F3bf9c263bc0f2ac5c3a7feb9e218d07475573ec8.gif&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644931768&t=34d229fa385975d48f41947b896e0242",
                    userName: '示例用户',
                    blogCount: 20, // 假设用户发布了20篇博客
                    followerCount: 1000, // 假设有1000个粉丝
                },
                isFollowing: false, // 是否已关注该用户，假设默认未关注
                userBlogs: [
                    {
                        id :11,
                        thumbnail: 'http://154.8.200.181:8888/down/YzrY9IwoPBia.png', // Sample image URL
                        title: 'Sample Blog Title 1',
                        summary: 'Sample blog summary or content...',
                        // Add more properties for blog content as needed
                    },
                    {
                        id:12,
                        thumbnail: 'https://sg-blog-oss.oss-cn-beijing.aliyuncs.com/2022/01/31/948597e164614902ab1662ba8452e106.png', // Sample image URL
                        title: 'Sample Blog Title 2',
                        summary: 'Another sample blog summary...',
                        // Add more properties for blog content as needed
                    },
                    {
                        id:14,
                        thumbnail: 'https://sg-blog-oss.oss-cn-beijing.aliyuncs.com/2022/01/31/948597e164614902ab1662ba8452e106.png', // Sample image URL
                        title: 'Sample Blog Title 2',
                        summary: 'Another sample blog summary...',
                        // Add more properties for blog content as needed
                    }
                    // Add more sample blog data objects as needed
                ],
                dialogVisible: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    categoryId: 0
                },
                esPageNum:1,
                articleList:[],
                hasMore:true,
                squareUrl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
            }
        },

        methods: {
            querySearchAsync(){

            },
            handleSelect(){

            },
            toggleSearch(){
                var myParams;
                if (this.keyword == null || this.keyword == '' || this.keyword == undefined) {
                    this.isSearchVisible = !this.isSearchVisible;
                    if (!this.isSearchVisible){
                        this.getList()
                    }

                } else {

                    myParams = {
                        currentPage: this.esPageNum,
                        pageSize: this.queryParams.pageSize,
                        keyword: this.keyword,
                        searchType :1
                    },

                    getArticleListByEs(myParams).then((resp => {
                        if (resp == null){
                            this.$message({
                                showClose: true,
                                message: '没有更多了！',
                                type: 'warning'
                            });
                            return;
                        }

                        this.articleList = resp.rows

                    }))
                }
            },
            toggleFollow() {
                // 切换关注状态的方法，可以发送请求到后端或者改变状态来模拟
                this.userInfo.following = !this.userInfo.following;
                // 这里可以添加相关的逻辑，如向后端发送请求更新关注状态等
                follow(this.userInfo.userId, this.userInfo.following).then((resp=>{
                    this.showUserInfo(this.userInfo.userId)
                }))

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            showUserInfo(createBy){
                this.dialogVisible = true;
                getUserBlogInfo(createBy).then((resp)=>{
                    this.userInfo = resp
                })
                getUserInfoArticleList(createBy).then((resp=>{
                    this.userBlogs = resp
                }))
            },
            //事件处理器
            showInitDate: function(oldDate,full){
                return initDate(oldDate,full)
            },
            getList(){
                articleList(this.queryParams).then((response)=>{
                    this.articleList = this.articleList.concat(response.rows)
                    if(response.total<=this.articleList.length){
                        this.hasMore=false
                    }else{
                        this.hasMore=true
                        this.queryParams.pageNum++
                    }
                })
            },
            showSearchShowList:function(initData){//展示数据
                if(initData){
                    this.articleList = []
                }

                this.getList()
            },
            addMoreFun:function(){//查看更多

                var myParams;
                if (this.keyword != null && this.isSearchVisible) {
                    this.esPageNum++;
                    myParams = {
                        currentPage: this.esPageNum,
                        pageSize: this.queryParams.pageSize,
                        keyword: this.keyword,
                        searchType: 1
                    },

                        getArticleListByEs(myParams).then((resp => {
                            if (resp == null) {
                                this.$message({
                                    showClose: true,
                                    message: '没有更多了！',
                                    type: 'warning'
                                });
                                return;
                            }
                            for (let i = 0; i < resp.rows.length ; i++) {
                               this.articleList.push(resp.rows[i])
                            }


                        }))
                    return;
                }


                this.showSearchShowList(false);
            },
            routeChange:function(){
                var that = this;
                this.queryParams.categoryId = (that.$route.query.classId==undefined?0:parseInt(that.$route.query.classId));//获取传参的classId
                this.showSearchShowList(true);
            }
        },
        components: { //定义组件

        },
        watch: {
           // 如果路由有变化，会再次执行该方法
           '$route':'routeChange',
           '$store.state.keywords':'routeChange'
         },
        created() { //生命周期函数
            // console.log(this.$route);
            var that = this;
            that.routeChange();
        }
    }
</script>

<style>
  /* 在您的样式表中或者 style 标签内添加以下样式 */

  .hide-button {
    border: none; /* 移除按钮的边框 */
    background-color: transparent; /* 设定透明背景 */
    padding: 0; /* 可选：移除按钮的内边距 */
    /* 如果需要移除按钮的阴影等样式，可以根据需要添加其他样式 */
  }

  .blog-count {
    font-size: 16px; /* 调整字体大小 */
    color: #4CAF50; /* 设置绿色字体颜色 */
    transition: transform 0.3s ease-in-out; /* 添加动画效果 */
  }

  .blog-count:hover {
    transform: scale(1.1); /* 鼠标悬停时放大 */
  }

  /* 粉丝数量的样式 */

  /* 粉丝数量的样式 */
  .follower-count {
    font-size: 16px; /* 调整字体大小 */
    color: #E91E63; /* 设置粉色字体颜色 */
    transition: transform 0.3s ease-in-out; /* 添加动画效果 */
  }

  .follower-count:hover {
    transform: scale(1.1); /* 鼠标悬停时放大 */
  }
  .user-others p {
    margin-bottom: 5px; /* 设置额外的垂直间距 */
  }
  .user-details {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* 调整用户信息和其他内容之间的垂直间距 */
  }

  .avatar-blog-image {
    width: 50px; /* 调整头像宽度 */
    height: 50px; /* 调整头像高度 */
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px; /* 为头像和用户信息之间添加一些水平间距 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  }

  .avatar-image {
    width: 100%;
    height: auto;
  }

  .user-info {
    margin-left: 10px; /* 调整用户名和其他信息之间的间距 */
  }

  .user-stats p {
    margin-bottom: 5px; /* 调整用户信息中各项之间的垂直间距 */
    display: flex;
    margin-left: 40px;
  }
  .avatar-blog-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
  }

  .avatar-image {
    width: 100%;
    height: auto;
  }

  /* 悬停效果，当鼠标悬停在头像上时放大 */
  .avatar-blog-image:hover {
    transform: scale(1.1);
  }

  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
    border-radius: 8px;
  }

  .user-details {
    flex: 1;
  }

  .user-info h3 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #333;
  }

  .follow-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ff7f50;
    color: #fff;
  }

  .follow-button.active {
    background-color: #ff4f4f;
  }

  .follow-button:hover {
    transform: scale(1.05);
  }

  .icon-heart {
    margin-left: 6px;
    font-size: 18px;
  }

  .follow-button {
    background-color: #ff8080;
    border-color: #ff8080;
    transition: all 0.3s ease;
  }

  .follow-button:hover {
    background-color: #ff5a5a;
    border-color: #ff5a5a;
  }

  .fa-heart::before {
    content: "\f004"; /* Unicode 图标表示心形 */
  }

  .fa-heart-o::before {
    content: "\f08a"; /* Unicode 图标表示空心心形 */
  }

  .fa {
    font-family: 'FontAwesome'; /* Font Awesome 图标字体 */
    margin-right: 5px;
  }
  .user-blog-content {
    padding: 20px;
  }

  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .blog-item {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
  }

  .blog-item:hover {
    transform: translateY(-5px);
  }

  .blog-thumbnail {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
  }

  .blog-image {
    width: 100%;
    height: 300px;
    transition: transform 0.3s ease-in-out;
  }

  .blog-item:hover .blog-image {
    transform: scale(1.05);
  }

  .blog-details {
    padding: 15px;
  }
  .search-bar-container {
    height: 22px;
    text-align: right;
    position: relative; /* 使用相对定位 */
    margin-top: -43px;
    padding-top: 100px; /* 补偿负 margin-top，防止影响其他布局 */
    padding: 10px;
  }
  .blog-details h3 {
    margin-top: 0;
    font-size: 18px;
  }

  .blog-details p {
    margin-bottom: 0;
  }
/*分享标题*/
.shareTitle{
    margin-bottom: 40px;
    position: relative;
    border-radius: 5px;
    background: #fff;
    padding:15px;
}
.shareclassTwo{
    width:100%;
}
.shareclassTwo li{
    display: inline-block;
}
.shareclassTwo li a{
    display: inline-block;
    padding:3px 7px;
    margin:5px 10px;
    color:#fff;
    border-radius: 4px;
    background: #64609E;
    border: 1px solid #64609E;
    transition: transform 0.2s linear;
    -webkit-transition: transform 0.2s linear;
}
.shareclassTwo li a:hover{
    transform: translate(0,-3px);
    -webkit-transform: translate(0,-3px);
}
.shareclassTwo li a.active{
    background: #fff;
    color:#64609E;

}
/*文章列表*/
    .sharelistBox{
        transition: all 0.5s ease-out;
        font-size: 15px;
    }


    /*.sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
        background: #48456C;
    }*/
</style>
